<template>
    <div class="textModal">
        <ActionSheet 
            v-model="show" 
            :title="'点评'+name" 
            @close="handelClose" 
            @open="handelOpen">
            <div class="content">
                <Field
                    v-model="message"
                    rows="6"
                    autosize
                    type="textarea"
                    maxlength="100"
                    placeholder="请输入点评内容"
                    show-word-limit
                />
                <div class="buttonBox border-top">
                    <div class="item border-right" @click="handelClose">
                        取消
                    </div>
                    <div class="item" @click="handelConfirm">
                        点评
                    </div>
                </div>
            </div>
        </ActionSheet>
    </div>
</template>

<script>
import { ActionSheet,Field,Toast } from 'vant';
export default {
    name:'textModal',
    components:{
        ActionSheet,
        Field,
        Toast
    },
    data(){
        return {
            title:'',
            show:false,
            message:''
        }
    },
    computed:{
        name(){
            return this.$store.state.studentAppraise.studentsInfo.name;
        }
    },
    methods:{
        handelClose(){
            this.show = false;
        },
        handelOpen(){
            this.message = '';
        },
        handelConfirm(){
            let message = this.message.replace(/(^\s*)|(\s*$)/g, "");
            if(message.length == 0){
                return Toast('点评不能为空！')
            }
            this.$store.dispatch('studentAppraise/PostStudentReview',this.message).then(res=>{
                Toast('文字点评成功');
                this.show = false;
            })
        }
    }
}
</script>

<style lang="less">
.van-field__control{
    font-size:0.26rem;
}
.buttonBox{
    display:flex;
    height: 0.9rem;
    line-height: 0.9rem;
    text-align: center;
    font-size:0.24rem;
    color:#666;
    .item{
        width:50%;
        box-sizing: border-box;
    }
}
</style>


